<template>
  <div>
    <header class="site-header">
      <div class="inner">
        <img src="@/assets/images/logo.png" @click="goHome" class="home" alt=""/>
<!--        {{ $t('welcome') }}-->
        <div class="head-right">
          <div class="notice">
            <img class="noticeImg" @click="openNoticeMsg" src="@/assets/images/notice.png" alt=""/>
            <span class="notice-spot" v-if="notifications.length>0"></span>
            <transition name="fade"
                        enter-active-class="fadeInDown"
                        leave-active-class="fadeOutUp">
              <div class="notice-drop" v-show="showNotification">
                <div class="drop-head">
                  <span>{{ $t('notice.notification') }}</span>
                  <span class="drop-close">
                <img src="@/assets/images/close.png" @click="openNoticeMsg" alt=""/>
              </span>
                </div>
                <div class="drop-list">
                  <ul v-if="notifications.length>0">
                    <li class="item item1" v-for="noti in notifications" :key="noti.id">
                      <router-link :to="{path:'/home/noticeList',query:{id:noti.id}}">{{ noti.title }}</router-link>
                    </li>
                  </ul>
                  <div class="noDate" v-else>
                    {{ $t('notData') }}
                  </div>
                </div>
                <div class="drop-more">
                  <router-link @click="showNotification=!showNotification" to="/home/noticeList?id=1">{{ $t('viewMore') }}</router-link>
                </div>
              </div>
            </transition>
          </div>
          <div class="connect">
            <div class="connect-left">
              {{ $store.state.wallet.balance||0 }} {{ $store.state.wallet.currency }}
<!--              {{ $store.state.wallet.currency }}-->
            </div>
            <div class="connect-right " @click="connectWallet" :class="{'onlyReady':$store.state.wallet}" >
              <el-avatar :size="20" :src="headPic" >
                <img src="@/assets/images/head.png" alt=""/>
              </el-avatar>
              {{ !$store.state.wallet?$t('connect'):$store.state.wallet.name }}
            </div>
          </div>
          <!--          {{showLanguage}}-->
          <div class="language">
            <img :src="getLangIcon()" @click="openLuanguages" class="language-icon" alt=""/>
            <transition name="fade"
                        enter-active-class="fadeInDown"
                        leave-active-class="fadeOutUp">
              <div class="language-con animate__animated  " v-show="showLanguage">
                <ul>
                  <li>
                    <img src="@/assets/images/Grouplan.png" @click="changeLanguage('en')" alt=""/>
                  </li>
                  <li>
                    <img src="@/assets/images/Grouplan1.png" @click="changeLanguage('ko')" alt=""/>
                  </li>
                  <li>
                    <img src="@/assets/images/Grouplan2.png" @click="changeLanguage('zh')" alt=""/>
                  </li>
                </ul>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
// import $ from 'jquery'
import {Message} from "element-ui";
import {connectWallet} from "@/requests/api";

export default {
  name: `Vheader`,
  data() {
    return {
      notifications: [],
      showLanguage: false,
      showNotification: false,
      headPic:''
    }
  },
  mounted() {
  },
  methods: {
    openNoticeMsg() {
      if (!this.showNotification){
        this.updateNoticeMsgList().then(()=>{
          this.showNotification = !this.showNotification
        })
      }
      else {
        this.showNotification = !this.showNotification
      }


    },
    openLuanguages() {
      this.showLanguage = !this.showLanguage;
    },
    changeLanguage(local) {
      this.$i18n.locale = local;
      this.$store.commit('setLanguage', local)
      localStorage.setItem('lang', local);
      this.openLuanguages()
      this.$router.push({path: '/home/ArkProject'})

    },
    updateNoticeMsgList(){
      return new Promise((resolve, reject) => {
        connectWallet({}).then(({resultCode, resultMessage, data}) => {
          if (resultCode === 0) {
            this.notifications = data.notifications.filter((r)=>{return r.is_read===0}).slice(0, 3)
            resolve()
          } else {
            Message.error(resultMessage)
            reject()
          }
        })
      })

    },
    getLangIcon() {
      if (this.$i18n.locale === 'en') {
        return require('@/assets/images/Grouplan.png')
      }
      if (this.$i18n.locale === 'ko') {
        return require('@/assets/images/Grouplan1.png')
      }
      if (this.$i18n.locale === 'zh') {
        return require('@/assets/images/Grouplan2.png')
      }
    },
    connectWallet() {
      connectWallet({}).then(({resultCode, resultMessage, data}) => {
        if (resultCode === 0) {
          Message.success(this.$t('dialog.loginOk'))
          this.headPic = data.wallet.avatar
          localStorage.setItem('myWallet', JSON.stringify(data))
          this.$store.commit('setWallet', data.wallet)
          this.$store.commit('setToken', data.token)
          if (localStorage.getItem('lang')) {
            this.$i18n.locale = localStorage.getItem('lang')
          } else {
            localStorage.setItem('lang', data.language)
            this.$i18n.locale = data.language
            this.$store.commit('setLanguage', data.language)
          }
          console.log(data.notifications.filter((r)=>{return r.is_read===0}))
          this.notifications = data.notifications.filter((r)=>{return r.is_read===0}).slice(0, 3)

        } else {
          Message.error(resultMessage)
        }
      })
    },
    goHome(){
      this.$router.push({path:'/'})
    }
  }
}
</script>

<style scoped>
.home{
  cursor: pointer;
}
.show {
  display: block;
}

.noDate {
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: rgba(108, 108, 108, 0.8);
}
.onlyReady{
  pointer-events: none;
  cursor: not-allowed;
}
.el-avatar{
  vertical-align: middle;
}
</style>
